<template>
  <j-modal
    :title="$t('详情')"
    :width="width"
    :visible="visible"
    switchFullscreen
    :okButtonProps="{ class: { 'jee-hidden': disableSubmit } }"
    @cancel="handleCancel"
  >
    <template slot="footer">
      <a-button type="primary" :loading="exloading" @click="handleExportXls(activeKey)">
        {{ $t('导出') }}
      </a-button>
      <a-button type="primary" @click="handleCancel">{{ $t('关闭') }}</a-button>
    </template>
    <div>
      <a-tabs v-model="activeKey" @change="handleTabChange">
        <a-tab-pane v-for="tab in tabs" :key="tab.payType" :tab="tab.payType_dictText">
          <a-table :columns="columns" :dataSource="dataSource" :pagination="false" bordered>
            <span slot="action" slot-scope="text, record">
              <a @click="showModal(record)">{{ $t('详情') }}</a>
            </span>
            <template slot="footer">
              <div style="font-weight: 600">{{ $t('合计') }}：{{ model.shouldPay.toFixed(2) }}</div>
            </template>
          </a-table>
        </a-tab-pane>
      </a-tabs>
    </div>
    <type-name-modal ref="typeNameForm"></type-name-modal>
  </j-modal>
</template>

<script>
import { getAction, downFile } from '@/api/manage'
import TypeNameModal from '../../order/modules/TypeNameModal'
let queryParam, payType, type
export default {
  name: 'PaytypeDetailModal',
  components: {
    TypeNameModal
  },
  data() {
    return {
      width: 1200,
      visible: false,
      disableSubmit: false,
      model: {},
      columns: [
        {
          title: this.$t('订单号'),
          align: 'center',
          dataIndex: 'id',
        },
        {
          title: this.$t('订单时间'),
          align: 'center',
          dataIndex: 'createTime',
          customCell: (r, i) => {
            return {
              style: {
                whiteSpace: 'normal',
              },
            }
          },
        },
        {
          title: this.$t('订单类型'),
          align: 'center',
          dataIndex: 'orderType_dictText',
        },
        {
          title: this.$t('支付方式'),
          align: 'center',
          dataIndex: 'payType_dictText',
          customCell: (r, i) => {
            return {
              style: {
                whiteSpace: 'normal',
              },
            }
          },
        },
        {
          title: this.$t('实付金额'),
          align: 'center',
          dataIndex: 'price',
          customRender: (text, record) => {
            return record.price.toFixed(2)
          },
          customCell: (r, i) => {
            return {
              style: {
                whiteSpace: 'normal',
                textAlign: 'right',
              },
            }
          },
        },
        {
          title: this.$t('设备名称'),
          align: 'center',
          dataIndex: 'deviceName',
          customCell: (r, i) => {
            return {
              style: {
                whiteSpace: 'normal',
              },
            }
          },
        },
        {
          title: this.$t('设备编码'),
          align: 'center',
          dataIndex: 'deviceId',
          customCell: (r, i) => {
            return {
              style: {
                whiteSpace: 'normal',
              },
            }
          },
        },
        {
          title: this.$t('操作员'),
          align: 'center',
          dataIndex: 'createBy',
          customCell: (r, i) => {
            return {
              style: {
                whiteSpace: 'normal',
              },
            }
          },
        },
        {
          title: this.$t('操作'),
          dataIndex: 'action',
          align: 'center',
          fixed: 'right',
          width: 80,
          scopedSlots: { customRender: 'action' },
        },
      ],
      dataSource: [],
      tabs: [],
      activeKey: '',
      exloading: false,
    }
  },
  methods: {
    showModal(record) {
      this.$refs.typeNameForm.edit(record)
    },
    handleTabChange(key) {
      payType = key
      this.$set(this, 'model', this.tabs.filter(t=>{return t.payType == key})[0])
      this.getList()
    },
    show(list, record, dtl, arg) {
      queryParam = Object.assign({}, dtl)
      payType = record.payType
      type = arg
      this.dataSource = []
      this.activeKey = record.payType
      this.tabs = list
      this.visible = true
      this.model = Object.assign({}, record)
      this.getList()
    },
    getList() {
      let url
      if (type == 1) {
        url = '/checkout/notCheckOut/queryNotCheckOutPayWithPayType'
      }
      if (type == 2) {
        url = '/checkout/bisCheckOut/queryOrderPayListByMainIdAndPayType'
      }
      getAction(url, Object.assign({}, queryParam, { payType: payType })).then((res) => {
        if (res.success) {
          this.dataSource = res.result
        }
      })
    },
    close() {
      this.visible = false
    },
    handleCancel() {
      this.close()
    },
    handleExportXls(fileName) {
      this.exloading = true
      let name = this.tabs.filter(t => {return t.payType == fileName})[0].payType_dictText
      if (!fileName || typeof fileName != 'string') {
        name = this.$t('导出文件')
      }
      let url
      if (type == 1) {
        url = '/checkout/notCheckOut/exportXlsPayType'
      }
      if (type == 2) {
        url = '/checkout/bisCheckOut/exportXlsPayType'
      }
      let param = Object.assign({}, queryParam, { payType: payType })
      console.log('导出参数', param)
      downFile(url, param)
        .then((data) => {
          if (!data) {
            this.$message.warning(this.$t('文件下载失败'))
            return
          }
          if (typeof window.navigator.msSaveBlob !== 'undefined') {
            window.navigator.msSaveBlob(new Blob([data], { type: 'application/vnd.ms-excel' }), name + '.xls')
          } else {
            let url = window.URL.createObjectURL(new Blob([data], { type: 'application/vnd.ms-excel' }))
            let link = document.createElement('a')
            link.style.display = 'none'
            link.href = url
            link.setAttribute('download', name + '.xls')
            document.body.appendChild(link)
            link.click()
            document.body.removeChild(link) //下载完成移除元素
            window.URL.revokeObjectURL(url) //释放掉blob对象
          }
        })
        .finally(() => {
          this.exloading = false
        })
    },
  },
}
</script>